<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>备份详情</title>
    <link rel="stylesheet" th:href="@{/css/base.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/base.js}"></script>
    <style>
        body {
            overflow-y: auto;
            margin: 15px 0 15px 0;
        }
        .layui-input {
            border-width: 0!important;
        }
        .layui-form-label {
            color: #999999!important;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" style="margin: 0 auto; max-width: 800px" action="" lay-filter="formDemo">
            <div class="layui-form layuimini-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属分区</label>
                    <div class="layui-input-block">
                        <input type="text" name="zoneName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">实例名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="nodeText" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库名</label>
                    <div class="layui-input-block">
                        <input type="text" name="databaseName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据表名</label>
                    <div class="layui-input-block">
                        <input type="text" name="tablesName" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备份状态</label>
                    <div class="layui-input-block" style="display: flex; align-items: center">
                        <span class="badge-custom-2" th:if="${0 == data.status}">备份中</span>
                        <span class="badge-custom-2" th:if="${1 == data.status}">上传中</span>
                        <span class="badge-custom-1" th:if="${2 == data.status}">成功</span>
                        <span class="badge-custom-3" th:if="${-1 == data.status}">失败</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否压缩</label>
                    <div class="layui-input-block" style="display: flex; align-items: center">
                        <span class="badge-custom-1" th:if="${data.isCompress}">是</span>
                        <span class="badge-custom-3" th:if="${!data.isCompress}">否</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否上传</label>
                    <div class="layui-input-block" style="display: flex; align-items: center">
                        <span class="badge-custom-1" th:if="${data.isUpload}">是</span>
                        <span class="badge-custom-3" th:if="${!data.isUpload}">否</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否删除</label>
                    <div class="layui-input-block" style="display: flex; align-items: center">
                        <span class="badge-custom-1" th:if="${data.isDelete}">是</span>
                        <span class="badge-custom-3" th:if="${!data.isDelete}">否</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">错误信息</label>
                    <div class="layui-input-block">
                        <textarea name="msg" class="layui-input" readonly style="resize: none; min-height: 100px; padding-top: 10px"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文件地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="filePath" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文件大小</label>
                    <div class="layui-input-block">
                        <input type="text" name="fileSize" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="startTime" class="layui-input" readonly th:value="${#dates.format(data.startTime, 'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="endTime" class="layui-input" readonly th:value="${#dates.format(data.endTime, 'yyyy-MM-dd HH:mm:ss')}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">耗时</label>
                    <div class="layui-input-block">
                        <input type="text" name="spendTime" class="layui-input" readonly>
                    </div>
                </div>
                <div class="layui-form-item" th:if="${null != data.filePath}">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-sm layui-btn-normal download-btn">
                            下载文件
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">

    layui.use(['form', 'layer'], function () {
        const form = layui.form,
            layer = layui.layer;

        let data = [[${data}]];
        delete data.startTime
        delete data.endTime
        // 计算文件大小
        let size = parseFloat(data.fileSize / 1024).toFixed(2)
        if(size < 1024) {
            data.fileSize = size + ' KB';
        }
        else if(1024 <= size && size < 1024 * 1024) {
            data.fileSize = parseFloat(size / 1024).toFixed(2) + 'MB';
        }
        else {
            data.fileSize = parseFloat(size / 1024 / 1024).toFixed(2) + 'GB';
        }
        // 耗时
        let time = data.spendTime;
        // ms
        if(0 <= time && time < 1000) {
            data.spendTime = time + '毫秒';
        }
        // s
        else if(1000 <= time && time < 60 * 1000) {
            data.spendTime = parseFloat(time / 1000).toFixed(2) + '秒';
        }
        // minute
        else if(60 * 1000 <= time && time < 60 * 60 * 1000) {
            data.spendTime = (time / 1000 / 60).toFixed(0) + '分' + ((time / 1000) % 60).toFixed(2) + '秒';
        }
        // hour
        else {
            data.spendTime = (time / 1000 / 60 / 60).toFixed(2) + '小时'
        }
        // 初始化赋值
        form.val("formDemo", data);

        $('.download-btn').click(function () {
            if (-1 < data.filePath.indexOf("http")) {
                window.open(data.filePath);
            } else {
                window.open(ctxPath + data.filePath);
            }
            return false
        })
    });
</script>
</body>
</html>
